<template>
  <div class="app-container">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step
        v-for="(i, f) in stepsTitle"
        :key="f"
        :title="f == active ? '进行中' : i.title"
        :description="f == active ? 'in progress' : i.description"
        @click.native="handelClickStep(f)"
      ></el-step>
    </el-steps>
    <div class="main">
      <StepsOne ref="submitOneForm" :data="form" v-if="active == 0" />
      <StepsTwo ref="submitTwoForm" :data="form" v-if="active == 1" />
      <StepsThree
        ref="submitThreeForm"
        @getTaskMode="getTaskMode"
        :data="form"
        v-if="active == 2"
      />
      <StepsFour
        ref="submitFourForm"
        @getTaskMode="getTaskMode"
        :data="form"
        v-if="active == 3"
      />
      <StepsFive
        ref="submitFiveForm"
        @getTaskMode="getTaskMode"
        :data="form"
        v-if="active == 4"
      />
    </div>
    <div class="buttonBox">
      <el-button
        @click.prevent="handleClick('prev')"
        v-if="active > 0"
        size="medium"
        >上一步</el-button
      >
      <el-button
        type="primary"
        @click.prevent="handleClick('next')"
        size="medium"
        v-loading="loading"
        >{{ active < stepsTitle.length - 1 ? "下一步" : "完成" }}</el-button
      >
    </div>
  </div>
</template>

<script>
import StepsFour from "./components/stepsFour.vue";
import StepsOne from "./components/stepsOne.vue";
import StepsThree from "./components/stepsThree.vue";
import StepsTwo from "./components/stepsTwo.vue";
import StepsFive from "./components/stepsFive.vue";
import {
  creactAppraiseTask,
  getTasks,
  updateTasks,
} from "@/api/console/tasks.js";

const refsArray = [
  "submitOneForm",
  "submitTwoForm",
  "submitThreeForm",
  "submitFourForm",
  "submitFiveForm",
];
const removeValue = [
  "ip",
  "pwd",
  "port",
  "uname",
  "start",
  "end",
  "baseType",
  "appraiseCountmode",
  "appraiseTaskmode",
];

export default {
  computed: {},
  dicts: ["data_base_type"],
  name: "Steps",
  components: { StepsOne, StepsFour, StepsThree, StepsTwo, StepsFive },
  data() {
    return {
      form: {},
      active: 0,
      stepsTitle: [
        {
          title: "基本信息",
          description: "请在下列中选择一个向导",
        },
        {
          title: "选择数据源",
          description: "请输入数据信息",
        },
        {
          title: "配置评估",
          description: "配置需要评估的项目",
        },
        {
          title: "选择指定对象",
          description: "选择评估对象",
        },
        {
          title: "评估配置预览",
          description: "评估任务配置汇总预览",
        },
      ],
      totalData: {},
      id: null,
      loading: false,
    };
  },
  created() {
    let that = this;
    this.$route.meta.title = that.$route.query.id
      ? "修改评估任务"
      : "新增评估任务";
    if (that.$route.query.id) {
      that.id = that.$route.query.id;
      getTasks({ id: that.id }).then(({ data }) => {
        data.start = data.taskType.split("-")[0];
        data.end = data.taskType.split("-")[1];
        data.taskCount = data.taskCount.split(",");
        data.taskTables = JSON.parse(data.taskTables);
        data.taskWay = String(data.taskWay);
        data.strategy = String(data.strategy);
        that.form = data;
      });
    }
  },
  methods: {
    handelClickStep(f) {
      if (this.active >= f || this.$route.query.id) {
        this.active = f;
        return;
      }
    },
    handleClick(status) {
      let that = this;
      let leg = that.stepsTitle.length - 1;
      const fun = {
        next() {
          if (that.active == 4) {
            that.loading = true;
            that.dataFusion(that.form);
            return;
          }
          if (that.active++ > leg) that.active = leg;
        },
        prev() {
          if (that.active-- < 0) that.active = leg;
        },
      };
      if (
        status == "next" &&
        !this.id &&
        this.$refs[refsArray[this.active]].$refs.form
      ) {
        this.$refs[refsArray[this.active]].$refs.form.validate((valid) => {
          if (valid) {
            fun[status]();
            return;
          }
        });
        return;
      }

      fun[status]();
      return false;
    },
    async dataFusion(form) {
      form.taskType = `${form.start}-${form.end}`;
      form.sinkDbTypes = form.end.join(",");
      form.taskWay = Number(form.taskWay);
      form.taskCount =
        typeof form.taskCount == "object"
          ? form.taskCount.join(",")
          : form.taskCount;
      if (form.taskTables.length > 0) {
        form.taskTables.forEach((f, i) => {
          form.taskTables[i] = { schema: f.schema, table: f.name };
        });
      }
      form.taskTables = JSON.stringify(form.taskTables || []);
      removeValue.forEach((f) => delete form[f]);
      if (this.id) {
        form.id = this.id;
      }
      try {
        let res = this.id
          ? await updateTasks(form)
          : await creactAppraiseTask(form);
        this.$message.success(res.msg);
        this.loading = false;
        setTimeout(() => {
          this.$router.push("/taskProcedure");
        }, 500);
      } catch (error) {
        this.$message.success(error.msg);
        this.loading = false;
      }
      return false;
    },
    async getTaskMode(_data) {
      // let selectTaskMode = [];
      let mode = await this.getDicts("appraise_tasktype");
      let type = await this.getDicts("db_object_type");
      type = type.data
        .find((f) => {
          return f.dictLabel == this.form.start;
        })
        .dictValue.split(",");
      mode.data.forEach((f) => {
        const value = f.dictValue.toUpperCase().toLowerCase().split("_")[1];
        if (type.includes(value)) {
          _data.push({
            text: f.dictLabel,
            value: f.dictValue,
          });
          return;
        }
      });
      _data.unshift({
        text: "全部评估",
        value: "EVALUATE_MIGRATION",
      });
      return _data;
    },
  },
  computed: {},
};
</script>
<style scoped lang="scss">
.app-container {
  width: 80%;
  margin: 0 auto;
  .buttonBox {
    margin: 40px auto;
    width: 87%;
    text-align: center;
  }

  .main {
    width: 87%;
    margin: 0 auto;
  }
}
</style>
